/**
 * @fileOverview diagram node
 * @author huangtonger@aliyun.com
 */

const Diagram = require('../../diagram');
const Global = require('../../global');
const Util = require('../../util/');
const groupIconPath = Util.getGroupIconPath();
const collapsedButtonPath = Util.getCollapsedButtonPath();
const expandedButtonPath = Util.getExpandedButtonPath();
const groupIconStyle = {
  fill: '#CED4D9'
};
const collapsedButtonStyle = {
  stroke: '#697B8C',
  fill: '#fff',
  fillOpacity: 0
};
const expandedButtonStyle = {
  stroke: '#697B8C',
  fill: '#fff',
  fillOpacity: 0
};
const groupLabelStyle = {
  fill: '#000000',
  textBaseline: 'top',
  textAlign: 'left'
};
const groupStyle = {
  stroke: '#CED4D9',
  fill: '#F2F4F5',
  radius: 4
};
const groupBackgroundPadding = Global.groupBackgroundPadding; // 背景组边距
const groupLabelMarginLeft = 40; // 组文本标签水平坐标偏移
const groupLabelMarginTop = 13; // 组文本标签竖直坐标偏移
const buttonMarginTop = 12;
const buttonMarginRight = 12;
const iconMarginLeft = 8;
const iconMarginTop = 12;
const collapsedWidth = 184;
const collapsedHeight = 40;
const emptyBoxWidth = collapsedWidth - groupBackgroundPadding[1] - groupBackgroundPadding[3];
const emptyBoxHeight = collapsedHeight - groupBackgroundPadding[0] - groupBackgroundPadding[2];

function drawKeyShape(model, group, path, style) {
  const keyShape = group.addShape('path', {
    attrs: {
      ...style,
      path
    }
  });
  keyShape.isGroupKeyShape = true;
  return keyShape;
}

function drawLabel(label, group, x, y) {
  const attrs = Util.mix(true, {}, groupLabelStyle, {
    x: x + groupLabelMarginLeft,
    y: y + groupLabelMarginTop
  });
  if (Util.isString(label)) {
    attrs.text = label;
  } else {
    Util.mix(attrs, label);
  }
  group.addShape('text', {
    attrs
  });
}

function drawIcon(path, group, x, y) {
  const shape = group.addShape('path', {
    attrs: {
      path,
      ...groupIconStyle
    }
  });
  const shapeBox = shape.getBBox();
  shape.translate(x - shapeBox.minX + iconMarginLeft, y - shapeBox.minY + iconMarginTop);
}

function drawButton(collapsed, group, x, y, width) {
  let shape;
  if (collapsed) {
    shape = group.addShape('path', {
      attrs: {
        path: expandedButtonPath,
        ...expandedButtonStyle
      }
    });
    const shapeBox = shape.getBBox();
    const shapeWidth = shapeBox.maxX - shapeBox.minX;
    shape.isExpandedButton = true;
    shape.translate(x + width - shapeBox.minX - shapeWidth - buttonMarginRight, y - shapeBox.minY + buttonMarginTop);
  } else {
    shape = group.addShape('path', {
      attrs: {
        path: collapsedButtonPath,
        ...collapsedButtonStyle
      }
    });
    const shapeBox = shape.getBBox();
    const shapeWidth = shapeBox.maxX - shapeBox.minX;
    shape.isCollapsedButton = true;
    shape.translate(x + width - shapeBox.minX - shapeWidth - buttonMarginRight, y - shapeBox.minY + buttonMarginTop);
  }
  shape.isButton = true;
  return shape;
}

function getX(box, padding) {
  return box.minX - padding[3];
}

function getY(box, padding) {
  return box.minY - padding[0];
}

function getWidth(box, padding) {
  return (box.maxX - box.minX) + padding[3] + padding[1];
}

function getHeight(box, padding) {
  return (box.maxY - box.minY) + padding[0] + padding[2];
}

Diagram.registerGroup('diagram-base', {
  draw(item) {
    const model = item.getModel();
    const group = item.getGraphicGroup();
    const box = item.getChildrenBBox();
    const style = this.getStyle(item);
    const collapsed = model.collapsed;
    const padding = model.padding ? model.padding : groupBackgroundPadding;

    if (box.minX === Infinity) {
      box.minX = model.x;
      box.maxX = model.x + emptyBoxWidth;
      box.minY = model.y;
      box.maxY = model.y + emptyBoxHeight;
    }
    if (collapsed) {
      box.minX = box.maxX - emptyBoxWidth;
      box.maxY = box.minY + emptyBoxHeight;
    }
    if (box.maxX - box.minX < emptyBoxWidth) {
      const detalWidth = emptyBoxWidth - box.maxX + box.minX;
      box.minX -= detalWidth / 2;
      box.maxX += detalWidth / 2;
    }
    const x = getX(box, padding);
    const y = getY(box, padding);
    const width = getWidth(box, padding);
    const height = getHeight(box, padding);
    const path = Util.getRectPath(x, y, width, height, style.radius);
    const keyShape = drawKeyShape(model, group, path, style);

    drawLabel(Util.isNil(model.label) ? '新建分组' : model.label, group, x, y);
    drawIcon(Util.isNil(model.icon) ? groupIconPath : model.icon, group, x, y);
    const button = drawButton(collapsed, group, x, y, width, height);
    button.item = item;
    model.x = box.minX;
    model.y = box.minY;
    return keyShape;
  },
  getStyle(item) {
    const model = item.getModel();
    return Util.mix(true, {}, groupStyle, {
      fill: model.color,
      stroke: model.color
    }, model.style);
  },
  getActivedStyle(/* item */) {
    return Global.groupActivedStyle;
  },
  getSelectedStyle(/* item */) {
    return Global.groupSelectedStyle;
  },
  getSelectedOutterStyle(/* item */) {
    return Global.groupSelectedOutterStyle;
  },
  getActivedOutterStyle(/* item */) {

  },
  intersectBox: 'rect'
});
